<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="ctxPath" value="${pageContext.request.contextPath}"/>




<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>表单组合</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="${ctxPath}/layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="${ctxPath}/layuiadmin/style/admin.css" media="all">
</head>
<body>

  <div class="layui-fluid">
    <div class="layui-card">
      <div class="layui-card-header">新增房间</div>
      <div class="layui-card-body" style="padding: 15px;">
        <form class="layui-form" action="" lay-filter="component-form-group">
          
          <div class="layui-col-md6">
	          <div class="layui-form-item">
	            <label class="layui-form-label">房间号</label>
	            <div class="layui-input-inline">
	              <input type="text" name="roomNo" lay-verify="required" placeholder="请输入房间号" autocomplete="off" class="layui-input">
	            </div>
	          </div>
          </div>
          <div class="layui-col-md6">
	          <div class="layui-form-item">
	            <label class="layui-form-label">房间类型</label>
	            <div class="layui-input-inline">
	            	<select id="typeId" name="typeId" lay-verify="required" lay-search="">
	              	</select>
	            </div>
	            <div class="layui-form-mid layui-word-aux">可在类型中编辑</div>
	          </div>
          </div>
          <div class="layui-col-md6">
	          <div class="layui-form-item">
	            <label class="layui-form-label">房间楼层</label>
	            <div class="layui-input-inline">
	            	<select id="storeyId" name="storeyId" lay-verify="required" lay-search="">
	              	</select>
	            </div>
	            <div class="layui-form-mid layui-word-aux">可在楼层中编辑</div>
	          </div>
          </div>
          <div class="layui-col-md6">
	          <div class="layui-form-item">
	            <label class="layui-form-label">房间状态</label>
	            <div class="layui-input-inline">
	              <input type="status" value="0" name="status" lay-verify="required" placeholder="请输入状态" autocomplete="off" class="layui-input" readonly>
	            </div>
	            <div class="layui-form-mid layui-word-aux">只读，默认为0</div>
	          </div>
          </div>
          <div class="layui-form-item layui-layout-admin">
            <div class="layui-input-block">
              <div class="layui-footer" style="left: 0;">
                <button class="layui-btn" lay-submit="" lay-filter="component-form-demo1">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>

    
  <script src="${ctxPath}/layuiadmin/layui/layui.js"></script>  
  <script src="${ctxPath}/js/jquery-1.11.1.min.js"></script>
  <script>
  layui.config({
    base: '${ctxPath}/layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'form', 'laydate'], function(){
    var $ = layui.$
    ,admin = layui.admin
    ,element = layui.element
    ,layer = layui.layer
    ,laydate = layui.laydate
    ,form = layui.form;
    
    $.ajax(
    		{
    			url:'${ctxPath}/Room/getRoomSelectOption', /* 数据接口 */
    			type:'post',
    			data:{},
    			dataType:'json',
    			success:function( resp ){
    				if( resp['result']=='success' ){
    				    var HTML="<option value=\"\">直接选择或搜索选择</option>";
    					var arr=resp['roomTypeList'];
    					for(var i=0;i<arr.length;i++){
    						HTML+="<option";
    						HTML+=" value=\""+arr[i]['id']+"||"+arr[i]['dayPrice']+"元  ||"+arr[i]['hourPrice']+"元\">"+arr[i]['typeName']+"</option>";
    					}
    					$("#typeId").append(HTML);
    					
    					var HTML="<option value=\"\">直接选择或搜索选择</option>";
    					var arr=resp['storeyList'];
    					for(var i=0;i<arr.length;i++){
    						HTML+="<option";
    						HTML+=" value=\""+arr[i]['id']+"||"+arr[i]['floor']+"层\">"+arr[i]['descript']+"</option>";
    					}
    					$("#storeyId").append(HTML);
    					
    					layui.use('form', function(){
    		                 var form = layui.form;
    		                 form.render();
    		             });
    				}else{
    					layer.msg('访问数据错误。');
    				}
    			}
    		}
    	);
    
    form.render(null, 'component-form-group');

    laydate.render({
      elem: '#LAY-component-form-group-date'
    });
    
    /* 自定义验证规则 */
    form.verify({
      pass: [/(.+){3,16}$/, '密码必须3到16位']
      ,repass: function(value){
    	  if(value!=$("#password").val()){
    		  console.log(value);
    		  return '密码不一致';
    	  }
      }
    });
    
    /* 监听提交 */
    form.on('submit(component-form-demo1)', function(data){
      /* parent.layer.alert(JSON.stringify(data.field), {
        title: '最终的提交信息'
      }) */
      data.field['typeId']=data.field['typeId'].split("||")[0];
      data.field['storeyId']=data.field['storeyId'].split("||")[0];
	  $.ajax(
		{
			url:'${ctxPath}/Room/saveRoom',
			type:'post',
			dataType:'json',
			data:data.field,
			success:function( data ){
				if( data.result!='success' ){
					layer.msg( data.cause ,
							{icon:2,time:2000,offset:'20px'});
				}else{
					layer.msg( '注册成功' ,
							{icon:1,time:2000,offset:'20px'});
				}
			}
		}			
	); 
      return false;
    });
    
    
    
    
  });
  
  $(document).on('mouseenter', 'div.layui-card-body > form > div:nth-child(2) > div > div.layui-input-inline > div > dl > dd:nth-child(n)', function () {
	    var data = $(this).attr('lay-value').split('||');
	    if(data.length>1){
	    	layer.tips("日租:"+data[1]+"时租:"+data[2], this, {tips: [2, '#5FB878'], time: 1000});
	    }
	})

	$(document).on('mouseenter', 'div.layui-card-body > form > div:nth-child(3) > div > div.layui-input-inline > div > dl > dd:nth-child(n)', function () {
	    var data = $(this).attr('lay-value').split('||');
	    if(data.length>1){
	    	layer.tips("楼层:"+data[1], this, {tips: [2, '#5FB878'], time: 1000});
	    }
	})
  </script>
</body>
</html>
